<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageEditor.aspx.cs" Inherits="AS.FilePicker.ImageEditor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Copping Image</title>
    <link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script src="jquery.Jcrop.js" type="text/javascript"></script>
    <link href="dialog.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align:center;width:<%=fWidth %>px;height:<%=fHeight %>px;padding-top:10px;margin:auto">
    <img id="img_crop" src="<%=Url %>" />
    
    <div style="padding-top:10px;padding-bottom:5px;">
        Width&nbsp;&nbsp;<input type="text" id="txtWidth" style="width:20px" runat="server" />&nbsp;&nbsp;
        Height&nbsp;&nbsp;<input type="text" id="txtHeight" style="width:20px" runat="server" />&nbsp;&nbsp;
        Crop quality <asp:TextBox ID="txtQuatity" runat="server" Text="100" Width="20px"></asp:TextBox> %&nbsp;
        
        <asp:Button ID="btnCrop" runat="server"
                        OnClientClick="return confirm('Are you sure to crop the image ?')"
                        Text="Crop Image" OnClick="btnCrop_Click" />
        &nbsp;&nbsp;&nbsp;
        <input type="button" value="   OK  " onclick="window.opener.Refresh_onclose('<%=Url %>');window.self.close();" id="Button1" />
        &nbsp;&nbsp;&nbsp;
        <input type="button" value="   Cancel  " onclick="window.self.close();" id="Button2" />
    </div>
    </div>
    
    <asp:HiddenField ID="X" runat="server" />

    <asp:HiddenField ID="Y" runat="server" />

    <asp:HiddenField ID="W" runat="server" />

    <asp:HiddenField ID="H" runat="server" />
    </form>
</body>
</html>
<script type="text/javascript">
$(window).load(function(){
	$('#img_crop').Jcrop({
        onSelect: updateCoords,
        allowSelect: true,
        allowResize: true,
        allowMove: true,
        setSelect: getRandom()
    });
});
    function updateCoords(c)
    {
	    $('#X').val(c.x);
    	$('#Y').val(c.y);
    	$('#W').val(c.w);
    	$('#H').val(c.h);
    	$('#txtWidth').val(c.w);
    	$('#txtHeight').val(c.h);
    };
    
    function getRandom() {
		var imgWidth = $('#img_crop').width();
		var imgHeight = $('#img_crop').height();
		var rong = Math.round(Math.random() * imgWidth);
		var dai = Math.round(Math.random() * imgHeight);
		if(document.getElementById("txtWidth").value != "0"){

		    rong = document.getElementById("txtWidth").value;
		}
		if(document.getElementById("txtHeight").value != "0"){
		    dai = document.getElementById("txtHeight").value;
		}
		
        $('#X').val(0);
        $('#Y').val(0);
        $('#W').val(rong);
        $('#H').val(dai);
		
		return [
			0,
			0,
			rong,
			dai
		];
	};
</script>
